<template>
  <el-dialog :append-to-body="true" :visible.sync="dialog" title="修改标签" width="600px">
    <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
      <el-form-item label="标签:">
        <el-cascader-panel
          v-model="selectList"
          :options="labelList"
          :props="{ multiple: true }"
          clearable/>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="cancel">取消</el-button>
      <el-button :loading="addLoading" type="primary" size="small" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getLableListCascade, updateCommodityLabel } from '@/api/mall/commodity'
export default {
  components: { },
  data() {
    return {
      dialog: false,
      addLoading: false,
      form: {
        ids: []
      },
      labelList: [], // 公司标签数据，数据源
      selectList: [], // 选中数据的集合
      commodityLabels: [], // 传递过来的商品的标签
      rules: {
      }
    }
  },
  created() {
    // 父组件打开后也会调用此生命周期，只加载一次，获取标签信息
    getLableListCascade().then(res => {
      this.labelList = res
    })
  },
  methods: {
    cancel() {
      this.resetForm()
    },
    setChecked(data) {
      // 选中的值转换，转换为级联选择器认识的数据
      // 清空原复选框选中值
      this.selectList = []
      // 原数据空判断
      this.commodityLabels = (data || [])
      // 由于js数组是二维数组[[1,21],[1,22]]，后台存的数据是一维的[1, 21, 22]，且散状的
      // 观察可得，二维数组，每个数组的数据一定是两条，因此，遍历数据源的子节点数据，若等于一维的数据，则判断这是我们需要的数据
      // 也就是说，后面无论是几维数据，遍历数据源的最后一个节点的数据，若是与一维的数据相等，这就是我们要的数据。
      // 实现方式可以用递归，从数据源的第一个节点依次.push一直到最后一个节点相等了，这就是我们要的数据
      this.labelList.map(res => {
        const list = []
        this.recursionQuery(res, list)
      })
    },
    // data当前节点数据，list：转换后的数组
    recursionQuery(data, list) {
      // children存在，则不是最后一个节点,继续递归
      if (data.children) {
        // 当前节点id，存储
        list.push(data.value)
        // 继续遍历下一级
        data.children.map(info => {
          // 每次遍历产生新的数组
          const array = Object.assign([], (list))
          this.recursionQuery(info, array)
        })
      } else {
        // 最后一个节点，查询是否与商品标签匹配，匹配则存储
        this.commodityLabels.map(label => {
          if (label === data.value) {
            list.push(data.value)
            this.selectList.push(list)
          }
        })
      }
    },
    getCheckToList() {
      // 获取标签集合，标签集合转换
      // 原数据为，如：[[1,21],[1,22]]
      // [["a34a01af-1b2e-4891-a715-75adb93f4e4a", "42dca615-2542-4fbb-8ca3-fba32f42db6b"]
      // ["a34a01af-1b2e-4891-a715-75adb93f4e4a", "628d27e9-d2db-43be-8e1b-9200893f9478"]]
      // 转换为 [1, 21, 22]
      // 1.原数据 [[1,21],[1,22]]转换为 [1, 21, 1, 22]
      const list = []
      this.selectList.map(res => {
        res.map(info => {
          list.push(info)
        })
      })
      // 2.去重，返回
      return Array.from(new Set(list))
    },
    doSubmit() {
      this.addLoading = true
      // 获取选中的标签集合
      this.form.labels = this.getCheckToList()
      updateCommodityLabel(this.form).then(res => {
        // 关闭loading,清空复选框
        this.addLoading = false
        this.selectList = []
        if (res) {
          // 执行成功
          this.resetForm()
          this.$notify({
            title: '修改成功',
            type: 'success',
            duration: 2500
          })
          // 刷新页面
          this.$parent.init()
        } else {
          // 系统不会报错，但是会有提示语，告知如何操作
          this.$notify({
            title: '修改失败',
            type: 'error',
            duration: 2500
          })
        }
      }).catch(err => {
        this.addLoading = false
        console.log(err.response.data.message)
      })
    },
    resetForm() {
      this.dialog = false
      this.$refs['form'].resetFields()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }

</style>
